<template>
  <div>
    <div class="common-layout">
    <el-container>
      <el-aside width="200px">

      </el-aside>
      <el-main>
        <span style="font-size: 30px;">{{ tableData.shangPinName}}</span>
        <br>
        <br>
        上产批次：{{tableData.shangPinPiCi}}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        保质期：{{tableData.shangPinBaoZhi}}天
        <br>
        <br>
        生产许可证号：{{tableData.shangPinXuKe}}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        生产企业：{{tableData.shangPinQiYe}}
      </el-main>
    </el-container>
    
  </div>
  </div>
  <br>
  <br>
  <div>
    <span style="color: blue;">养殖信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button>设置</el-button>
    <br>
    <br>
    品种：{{tableDate.yangZhiPinZhong}}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    来源：{{tableDate.yangZhiLaiYuan}}
    <br>
    <br>
    饲养天数：{{tableDate.yangZhiTianShu}}天
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    饲养品牌：{{tableDate.yangZhiPinPai}}
    <br>
    <br>
    饲养负责人：{{tableDate.yangZhiFuZhe}}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    出栏日期：{{tableDate.yangZhiTime}}
    <br>
    <br>
    <span style="color: blue;">保健信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button>新增行</el-button>
    <el-table :data="BaoJianShow" style="width: 100%">
      <el-table-column prop="baoJianTianShu" label="饲养天数" width="120"/>
      <el-table-column prop="baoJianFangShi" label="保健方式" width="120"/>
    <el-table-column prop="baoJianFanfFa" label="保健方法" width="120"/>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-text style="color: blue;" @click="handleEdit(row)">修改</el-text>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-text style="color: blue;" @click="handleDelete(row)">删除</el-text>
      </template>
    </el-table-column>
  </el-table>
  <br>
    <br>
    <span style="color: blue;">企业信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button>设置</el-button>
    <br>
    <br>
    养殖场：{{QiYeShow.qiYeName}}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    负责人：{{QiYeShow.qiYeFuZe}}
    <br>
    <br>
    存栏数量：{{QiYeShow.qiYeShuLiang}}只
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref,onMounted,reactive } from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//数据
const BaoJianShow:any=ref([])
const getBaoJian=()=>{
  axios.get('http://localhost:35582/api/Account/BaoJianShow').then(res=>{
    BaoJianShow.value=res.data.data
  }).catch(err=>{
    console.log(err);
  })
}

//数据
const QiYeShow:any=ref([])
const getQiYe=()=>{
  axios.get('http://localhost:35582/api/Account/QiYeShow').then(res=>{
    QiYeShow.value=res.data.data[0]
  }).catch(err=>{
    console.log(err);
  })
}

const handleEdit=(row:any)=>{}
const handleDelete=(row:any)=>{}

//数据
const tableDate:any=ref([])
const getShow=()=>{
  axios.get('http://localhost:35582/api/Account/YangZhiShow').then(res=>{
    tableDate.value=res.data.data[0]
  }).catch(err=>{
    console.log(err);
  })
}

//数据
const tableData:any=ref([])
const getList=()=>{
  axios.get('http://localhost:35582/api/Account/ShangPinShow').then(res=>{
    tableData.value=res.data.data[0]
  }).catch(err=>{
    console.log(err);
  })
}

//钩子函数
onMounted(()=>{
  getList();
  getShow();
  getBaoJian();
  getQiYe();
})
</script>

<style scoped>

</style>